<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Главная</title>
</head>
<body>
  <div class="wrapper">
    <nav>
      <!-- Проходим циклом по results, которые нам отдал бэкенд  -->
      <!-- Как заполняем комменты: запускаем еще один цикл по movie.comments и добавляем каждую строку из этого массива в атрибут data-comments, разделяя \\ -->
        <% for (let movie of results) { %>
          <div class="item" data-title="<%= movie.title %>"
                            data-description="<%= movie.description %>"
                            data-comments="<% for (let comment of movie.comments) { %>
                              <%=comment%>\\
                             <% } %>"
            ><%= movie.title %></div>
        <% } %>
    </nav>
    <div class="card">
      <!-- По дефолту на странице будет отображаться инфа про первый фильм в results -->
      <div class="title"><%= results[0].title %></div>
      <div class="description"><%= results[0].description %></div>
      <div class="link"><%= results[0].link %></div>
      <section class="comments">
        <div class="label">Комментарии</div>
        <div class="comments">
          <!-- То же самое: берем нулевой элемент results и проходим по его комментариям, добавляя дивы в .comments -->
          <% for (let comment of results[0].comments) { %>
            <div class="comment"><%= comment %></div>
          <% } %>
        </div>
        <div class="new_comment">
          <input placeholder="Оставить комментарий" type="text" class="new_comment">
          <a class="send">Отправить</a>
        </div>
      </section>

    </div>
  </div>

<script>

  // Записали ВСЕ кнопки навигации - все .item
  const btns = document.querySelectorAll('.item')

  // Записали текущий заголовок, описание и комменты. Именно сами элементы в отдельности
  const currentTitle = document.querySelector('.title')
  const currentDescription = document.querySelector('.description')
  const currentComments = document.querySelector('div.comments')

  // Кнопка отправки комментария
  const sendBtn = document.querySelector('.send')

  // Для каждого элемента массива добавляем хэндлер - обработчик событий
  btns.forEach(btn => {
    // Обработка клика
    btn.addEventListener('click', event => {
        // btn - тот элемент, на который будут нажимать

        // Получили новый заголовок, который потом нужно отобразить
        const newTitle = btn.getAttribute('data-title')
        // Заменили текст текущего заголовка на новый
        currentTitle.textContent = newTitle

        // Получили новое описание
        const newDescription = btn.getAttribute('data-description')
        // Заменили
        currentDescription.textContent = newDescription

        // Новые комменты храняется в data-comments как строка из комментариев, разделенных \\
        // Поэтому заменяем все пробелы на пустые строки и сплитим через \\. На выходе получим массив из строк
        const newComments = btn.getAttribute('data-comments').replaceAll(' ', '').split('\\')
        // Очищаем HTML-код блока с комментариями
        currentComments.innerHTML = '';
        // Проходимся по массиву со строками
        newComments.forEach(element => {
            // Если строка не пустая
            if (element.trim()) {
              // Создаем новый элемент комментария
              let comm = document.createElement("div");
              // Добавляем ему класс
              comm.classList.add('comment')
              // Добавляем текст элементу
              comm.textContent = element.trim()
              // Добавляем элемент в DOM-дерево, то есть просто добавляем его в блок комментариев
              currentComments.append(comm)
            }
        });
    });
  });

  // Добавление комментариев
  sendBtn.addEventListener('click', () => {
    // Если инпут не пустой
    if (document.querySelector('input').value) {
    // Отправляем пост запрос по адресу /add_comment/названиефильма/тексткомментария
    fetch(`http://localhost:3000/add_comment/${currentTitle.textContent}/${document.querySelector('input').value}`, {
      // Что здесь происходит: указали метод запроса - POST, передали что-то в тело - {"status": "success"}, в хедерах запроса указали, что мы передаем JSON в Юникоде
      // В нашем случае вообще не важно, что передавать в тело, потому что все нужные вещи - фильм и текст комментария - мы указали в ссылке
        method: "POST",
        body: JSON.stringify({
          "status": "success",
        }),
        headers: {
          "Content-type": "application/json; charset=UTF-8"
        }
      });

      // Создаем и настраиваем новый элемент с комментарием
      let comm = document.createElement("div");
      comm.classList.add('comment')
      comm.textContent = document.querySelector('input').value
      // Добавляем элемент в блок с комментариями
      currentComments.append(comm)

      // Очищаем инпут
      document.querySelector('input').value = ''
    } else {
      // Иначе делаем его красным
      document.querySelector('input').style.borderColor = 'red'
    }
  })



</script>

</body>
</html>